<template>
  <el-row>
    <base-layout
      :dialog-title="dialogTitle"
      :dialog-visible="dialogVisible"
      @dialog-close="dialogClose"
      :dialogWidth="'800px'"
    >
      <template #searchPanel>
        <el-row :gutter="20">
          <search-panel
            v-slot="{ form }"
            @search="search"
            :showAddButton="true"
            @insert="addService"
            addTitle="新增会员卡"
            :addPer="'member:save'"
            :selectPer="'member:page'"
          >
            <job-shop v-model="form.storeId" placeholder="所属门店" />
            <el-select
              clearable
              style="width: 200px"
              v-model="form.memberLevelDictId"
              placeholder="会员等级"
            >
              <el-option
                v-for="item in dict['客户会员等级']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
            <el-select
              clearable
              style="width: 200px"
              v-model="form.clientType"
              placeholder="客户类型"
            >
              <el-option
                v-for="item in dict['客户类型']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
            <el-input
              clearable
              style="width: 200px"
              v-model="form.likeName"
              placeholder="请输入客户姓名/手机号"
            />
          </search-panel>
        </el-row>
      </template>
      <template #contentPanel>
        <data-table
          :value="tableData"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          :width="120"
          :total-count="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @row-dblclick="rowDblclick"
        >
          <template #action="{ row }">
            <i
              class="el-icon-edit"
              title="修改"
              v-permission="'member:update'"
              style="cursor: pointer"
              @click="handleDataChange(row, '修改会员卡')"
            ></i>
            <i
              class="el-icon-umbrella"
              title="权益"
              v-permission="'member:update'"
              style="margin-left: 20px; cursor: pointer"
              @click="interestsAdd(row)"
            ></i>
          </template>
        </data-table>
        <!--工具条-->
      </template>
      <template #dialog>
        <dialog-data-form :value="dialogData" @operate="handleDataOperate" />
      </template>
    </base-layout>
    <el-dialog
      v-if="interestsvisible"
      key="cxcv12"
      title="会员卡权益"
      :visible.sync="interestsvisible"
      @close="InterestsdialogClose"
      :before-close="interestshandleClose"
    >
      <RightsInterests
        @operate="handleRightsInterests"
        :fromdata="interestsData"
      />
    </el-dialog>
    <el-dialog
      v-if="levelInfovisible"
      key="cxcv1222"
      title="会员卡详情"
      :visible.sync="levelInfovisible"
      @close="levelInfodialogClose"
      :before-close="levelInfohandleClose"
      :width="'800px'"
    >
      <LevelInfo
        ref="levelInforegv"
        :fromdata="levelInfoData"
        :isEdit="true"
        @operate="levelInfoDataEidt"
      />
    </el-dialog>
  </el-row>
</template>

<script>
import {
  levelList,
  addLevel,
  memberdetail,
  updateLevel,
  equitiesUpdate,
  equitiesSave,
} from '@/api/after-sale/client/level'
import baseMixin from '@/mixins/base'
import DialogDataForm from './components/DialogDataForm.vue'
import { parseTimeToYMDHMS, getDict } from '@/utils'
import RightsInterests from './components/RightsInterests.vue'
import LevelInfo from '@/views/after-sale/client-manage/view/level-info.vue'

export default {
  components: {
    DialogDataForm,
    RightsInterests,
    LevelInfo,
  },
  mixins: [
    baseMixin({
      findData: levelList,
      addData: addLevel,
      updateData: updateLevel,
      findDataById: memberdetail,
      dataName: ['content', 'totalRecords'],
      idName: 'id',
    }),
  ],
  data() {
    return {
      // communitys: [],
      // dialogWidth: '1000px',
      // service: {},
      // form: {},
      interestsvisible: false,
      levelInfovisible: false,
      levelInfoData: {},
      interestsData: {},
      dict: [],
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '会员卡编号', value: 'memberCode', type: 'text' },
        { name: '会员卡等级', value: 'memberGrade', type: 'text' },
        { name: '会员卡持有积分', value: 'integral', type: 'text' },
        { name: '配件折扣', value: 'partsDiscount', type: 'text' },
        { name: '工时折扣', value: 'hoursDiscount', type: 'text' },
        { name: '录入时间', value: 'createTime', type: 'text' },
      ],
    }
  },
  async created() {
    this.dict = getDict(['客户会员等级', '客户类型'])
  },
  methods: {
    //会员卡详情界面表格按钮事件
    levelInfoDataEidt(row) {
      console.log('回传信息', row)
      // row.id=row.memberId;
      // delete row.id;
      this.interestsData = row
      this.interestsvisible = true
    },
    //表格双击
    rowDblclick(row) {
      this.levelInfovisible = true
      this.levelInfoData = row
    },
    // 权益弹窗确定
    async handleRightsInterests(formValue, operate) {
      let { success } =
        operate === 'update'
          ? await equitiesUpdate(formValue)
          : await equitiesSave(formValue)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        if (this.$refs.levelInforegv) {
          this.interestsvisible = false
          this.$refs.levelInforegv.setTableData()
        }
        this.InterestsdialogClose()
        this.setTableData()
      } else {
        this.$message.error('操作失败')
      }
    },
    //打开权益
    interestsAdd(row) {
      this.interestsData.memberId = row.id
      this.interestsvisible = true
    },
    //员卡详情弹窗之前
    levelInfohandleClose() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.levelInfodialogClose()
        })
        .catch((_) => {})
    },
    //会员卡权益弹窗关闭之前
    interestshandleClose() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.InterestsdialogClose()
        })
        .catch((_) => {})
    },
    //会员卡详情弹窗
    levelInfodialogClose() {
      this.levelInfovisible = false
    },
    //会员卡权益弹窗关闭
    InterestsdialogClose() {
      this.interestsvisible = false
    },
    search(form) {
      this.searchOptions = {
        ...form,
      }
      this.currentPage = 1
      this.setTableData()
    },
    interestsInfo(row) {
      this.$store.state.interestsInfoId = row.id
      this.$router.push({ path: '/customer/interests' })
    },
    addService() {
      this.handleDataInsert('添加会员卡')
    },
  },
}
</script>

<style lang="scss" scoped>
.vLine {
  border-left: solid 3px black;
  height: 16px;
  vertical-align: bottom;
  display: inline-block;
}
</style>
